//人员列表
<template>
  <div class="com-container">
    <dv-scroll-board
      class="dv-scr-board"
      :config="config"
      @click="clickRow($event)"
    />
    <el-dialog title="监控信息" :visible.sync="dialogVisible">
      <video
        :src="videourl"
        autoplay="autoplay"
        muted="muted"
        controls="controls"
        loop="loop"
      ></video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: null, //服务器返回的数据
      config: {},
      dizhi: "http://127.0.0.1:8000",
      videourl: "",
      dialogVisible: false,
    };
  },
  props: {
    fenqu: String,
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取服务器数据
    async getData() {
      const res = await this.$http.get("/people/people", {
        params: {
          area: this.fenqu,
        },
      });
      this.allData = res.data;
      // console.log(this.fenqu);
      // console.log(this.allData);
      this.config = {
        header: ["照片", "id", "姓名", "工作", "资历是否满足", "视频监控"],
        data: this.allData.map((item) => [
          "<img src='" +
            "http://127.0.0.1:8000" +
            item.img +
            "' alt='' width='100' height='100' />",
          item.id,
          item.name,
          item.job,
          item.qualifications
            ? "<span  class='colorGrass'>满足</span>"
            : "<span  class='colorRed'>未满足</span>",
          `<div  class='colorRed'>监控视频</div>`,
        ]),
        rowNum: 2, //表格行数
        headerHeight: 35,
        indexHeader: "序号",
        headerBGC: "RGBA(38, 45, 56,0.3)", //表头
        oddRowBGC: "RGBA(38, 45, 56,0.5)", //奇数行
        evenRowBGC: "RGBA(38, 45, 56,0.3)", //偶数行
        index: true,
        // columnWidth: [50, 120, 120, 100, 100, 150, 100],
        align: ["center"],
      };
    },
    //点击行
    clickRow(row) {
      this.videourl = this.dizhi + this.allData[row.rowIndex].video;
      this.dialogVisible = true;
    },
    //视频监控
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  background: rgba(22, 31, 38, 0.5) !important;
}
/deep/ .el-dialog__title {
  color: #fff;
}
/deep/ .el-dialog__body {
  color: #fff;
}
video {
  width: 100%;
  height: 400px;
}
</style>
